<template>
  <up-tabs
    style="background-color: rgb(245, 245, 245)"
    :list="tabs"
    @click="click"
    itemStyle="width:33%;height:100rpx;"
    :scrollable="false"
    activeStyle="color:rgb(119, 173, 243);"
    lineWidth="45"
  ></up-tabs>

  <view class="profile">
    <Card title="**桉">
      <template v-slot:fu-title>
        <view>
          <image
            style="
              width: 30rpx;
              height: 30rpx;
              vertical-align: middle;
              margin-right: 10rpx;
            "
            src="/static/icons/切换.png"
            mode="scaleToFill"
          />
          <text>切换户号</text>
        </view>
      </template>
      <template v-slot:main>
        <view>
          <text>北京市朝阳区*************1283638236373</text>
          <view style="margin-top: 30rpx">
            <text>余额： </text>
            <text>12.34元</text>
            <text style="margin-left: 30rpx; color: var(--fontColor)" @click="goPayCharges()">去缴费</text>
          </view>
        </view>
      </template>
    </Card>
    <!-- 报表 -->
    <Card :isCenter="true">
      <template v-slot:main-title>
        <up-tabs
          style=""
          :list="baoList"
          itemStyle="width:33%;height:100rpx;"
          :scrollable="false"
          activeStyle="color:rgb(119, 173, 243);"
          lineWidth="45"
        ></up-tabs>
      </template>
      <template v-slot:main>
        <view>
          <view style="margin: auto; text-align: center; font-size: 30rpx">{{
            text
          }}</view>
          <view class="echars" ref="chartRef" style="width: 100%; height: 500rpx"> </view>
          <view class="table">
            <view class="list title">
              <view>月份</view>
              <view>
                
                {{ current == 0?'水量（吨）': current == 1 ? '电量（度）': '燃气量（方）'}}
              </view>
              <view>
                {{ current == 0?'水费（元）': current == 1 ? '电费（元）': '燃气费（元）'}}
              </view>
            </view>
            <view class="list" v-for="k in list[current]?.children">
              <view>{{ k.yuefen }}</view>
              <view>{{ k.num }}</view>
              <view>{{ k.num*list[current].price }}</view>
            </view>
          </view>
        </view>
      </template>
    </Card>
  </view>
  <view class="content"> </view>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getWaterElectric } from "@/api/waterElectric.js";
import Card from "@/components/card-2.0";
import * as echarts from "echarts";
let chartRef = ref();
let myChart = ref(null);
let current = ref(0);
const tabs = reactive([{ name: "用水量" }, { name: "用电量" }, { name: "燃气使用量" }]);
const baoList = reactive([{ name: "2024年" }, { name: "2023年" }, { name: "2022年" }]);
let list = ref([]);
let text = ref(""); //图标标题
let option = {
  title: {
    show: true,
    subtext: "单位（吨）",
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      axisTick: {
        alignWithLabel: true,
        show: true,
      },
      axisLabel: {
        fontSize: 10,
        interval: 0,
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: {
        fontSize: 10,
      },
    },
  ],
  series: [
    {
      name: "Direct",
      type: "bar",
      barWidth: 8,
      barMaxWidth: "20rpx",
      data: [],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#83bff6" },
          { offset: 0.5, color: "#188df0" },
          { offset: 1, color: "#188df0" },
        ]),
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#2378f7" },
            { offset: 0.7, color: "#2378f7" },
            { offset: 1, color: "#83bff6" },
          ]),
        },
      },
    },
  ],
};

onLoad((option) => {
  if (option.value) {
    current.value = option.index;
  }
  getFeiyongList();
});
//挂载完毕后进行初始化echarts
onMounted(() => {
  myChart.value = echarts.init(document.querySelector(".echars"));
});

function getFeiyongList() {
  getWaterElectric().then((res) => {
    // console.log(res);
    if (res.status == 200) {
      list.value = res.data;
      // console.log(list.value);
      // month.value = list.value[current.value].children.map(item=>item.month)
      setCharts();
    }else{
      uni.showToast({
        title: res.data.message,
        icon: 'error',
        mask: true
      })
    }
  });
}
function setCharts() {
  if (current.value == 0) {
    text.value = "月用水分布";
    option.title.subtext = "单位（吨）";
  }
  if (current.value == 1) {
    text.value = "月用电分布";
    option.title.subtext = "单位（度）";
  }
  if (current.value == 2) {
    text.value = "月用燃气分布";
    option.title.subtext = "单位（方）";
  }
  // 切换展展示数据
  let arr = []
  arr = [...list.value[current.value].children]
  option.series[0].data = arr
    .reverse()
    .map((item) => item.num);
  // console.log(option.value,'测试option的配置');
  myChart.value.setOption(option); //切换配置
}

function click(item) {
  current.value = item.index; //切换高亮数据
  setCharts()
}


function goPayCharges(index){
  uni.navigateTo({
    url: '/pages/waterElectric/components/payCharges?index='+current.value
  })
}
</script>



<style lang="scss" scoped>
.table{
  margin-top: 35rpx;
  .list{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 20rpx;
    border-bottom: 3rpx solid #e0e0e0;
  }
  .list>view{
    text-align: center;
    min-width: 100rpx;
  }
  .title{
    background-color: rgb(242, 242, 242);

  }
}

</style>
